<template>
  <div>
    <div class="box">
      <p>
        <router-link to="/redEnvelope">RedEnvelope</router-link>
      </p>
    </div>
    <div class="box">
      <p>
        <button @click="chooseImage">获取本地图片</button>
      </p>
      <img v-if="!!imgUrl" class="img" :src="imgUrl" alt="" />
    </div>
    <div class="box">
      <p>
        <button @click="chooseImage">图片预览</button>
      </p>
      <img class="img" @click="previewImage" :src="imgUrl2" alt="" />
    </div>
    <div class="box">
      <p style="margin-bottom: 40px">长按保存图片到本地</p>
      <p style="margin-bottom: 40px">
        <img class="img" @click="previewImage" :src="imgUrl2" alt="" />
      </p>
    </div>
    <div class="box">
      <p>
        <button @click="selectEnterpriseContact">通讯录选人</button>
      </p>
      <p>已选的部门:</p>
      <ul v-if="selectedDepartmentList.length">
        <li v-for="item in selectedDepartmentList" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
      <p>已选的成员:</p>
      <ul v-if="selectedUserList.length">
        <li v-for="item in selectedUserList" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import wx from 'wx';
import { injectWx } from '@/utils';
import { Dialog } from 'vant';

export default {
  name: 'WXTest',
  data() {
    return {
      imgUrl: '',
      imgUrl2: 'http://digitaltotem.top/rose.jpeg',
      selectedDepartmentList: [], // 已选的部门列表
      selectedUserList: [], // 已选的成员列表
    };
  },
  methods: {
    downImage() {
      document.getElementById('download-test').click();
    },
    previewImage() {
      wx.previewImage({
        current: this.imgUrl2, // 当前显示图片的http链接
        urls: [this.imgUrl2], // 需要预览的图片http链接列表
      });
    },
    chooseImage() {
      const self = this;
      if (/wxwork/.test(window.navigator.userAgent)) {
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          defaultCameraMode: 'batch', //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值，其中front表示默认为前置摄像头单拍模式，batch_front表示默认为前置摄像头连拍模式。（注：用户进入拍照界面仍然可自由切换两种模式）
          isSaveToAlbum: 1, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
          success: function (res) {
            let localIds = res.localIds; // 返回选定照片的本地ID列表，
            // self.imgUrl = localIds[0];
            debugger;
            // andriod中localId可以作为img标签的src属性显示图片；
            // iOS应当使用 getLocalImgData 获取图片base64数据，从而用于img标签的显示（在img标签内使用 wx.chooseImage 的 localid 显示可能会不成功）
            // wx.checkJsApi({
            //   jsApiList: ['getLocalImgData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            //   success: function (res) {
            //     // 以键值对的形式返回，可用的api值true，不可用为false
            //     // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            //     debugger;
            //     if (res.errMsg === 'checkJsApi:ok' && res.checkResult.getLocalImgData) {
            //       wx.getLocalImgData({
            //         localId: localIds[0], // 图片的localID
            //         success: function (res) {
            //           self.imgUrl = res.localData; // localData是图片的base64数据，可以用img标签显示
            //         },
            //         fail: function (res) {
            //           debugger;
            //         },
            //       });
            //     } else {
            //       self.imgUrl = localIds[0];
            //     }
            //   },
            //   fail: function (res) {
            //     debugger;
            //     console.log(res);
            //     self.imgUrl = localIds[0];
            //   },
            // });
            wx.uploadImage({
              localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
              isShowProgressTips: 1, // 默认为1，显示进度提示
              success: function (res) {
                debugger;

                Dialog({ message: `wx.uploadImage: ${res.serverId}` });
                // var serverId = res.serverId; // 返回图片的服务器端ID
              },
            });
          },
        });
      } else {
        self.imgUrl = 'https://img01.yzcdn.cn/vant/cat.jpeg';
      }
    },
    selectEnterpriseContact() {
      const self = this;
      debugger;
      if (/wxwork/.test(window.navigator.userAgent)) {
        wx.invoke(
          'selectEnterpriseContact',
          {
            fromDepartmentId: -1, // 必填，表示打开的通讯录从指定的部门开始展示，-1表示自己所在部门开始, 0表示从最上层开始
            mode: 'multi', // 必填，选择模式，single表示单选，multi表示多选
            type: ['department', 'user'], // 必填，选择限制类型，指定department、user中的一个或者多个
            selectedDepartmentIds: ['2', '3'], // 非必填，已选部门ID列表。用于多次选人时可重入，single模式下请勿填入多个id
            selectedUserIds: ['lisi', 'lisi2'], // 非必填，已选用户ID列表。用于多次选人时可重入，single模式下请勿填入多个id
          },
          function (res) {
            if (res.errmsg === 'selectEnterpriseContact:ok' || res.err_msg === 'selectEnterpriseContact:ok') {
              if (typeof res.result == 'string') {
                res.result = JSON.parse(res.result); //由于目前各个终端尚未完全兼容，需要开发者额外判断result类型以保证在各个终端的兼容性
              }
              self.selectedDepartmentList = res.result.departmentList || []; // 已选的部门列表
              self.selectedUserList = res.result.userList || []; // 已选的成员列表
            }
          }
        );
      } else {
        self.selectedDepartmentList = [
          { id: 1, name: 'AAA' },
          { id: 2, name: 'BBB' },
          { id: 3, name: 'CCC' },
          { id: 4, name: 'DDD' },
        ]; // 已选的部门列表
        self.selectedUserList = [
          { id: 1, name: 'aaa' },
          { id: 2, name: 'bbb' },
          { id: 3, name: 'ccc' },
          { id: 4, name: 'ddd' },
        ]; // 已选的成员列表
      }
    },
  },
  created() {
    debugger;
    injectWx(
      ['selectEnterpriseContact', 'chooseImage', 'getLocalImgData', 'uploadImage', 'previewImage'],
      ['selectExternalContact']
    ).then((res) => {
      debugger;
      if (res === true) {
        console.log('wx 注入成功', res);
      }
    });
  },
  mounted() {},
};
</script>

<style scoped>
.img {
  width: 300px;
  height: auto;
  margin: 0 auto;
}

.box {
  border-bottom: solid 1px #999;
  margin-bottom: 40px;
}
</style>
